import React, {Component} from 'react'
import {Text, View, StyleSheet, Button, Image, FlatList, ScrollView, TouchableOpacity} from 'react-native'
import {border, default as styles, padding, roundWithSize} from "../../../../style/index";
import {AppIcon} from "../../../../assets/icon/AppIcon";
import CertBtn from "../../../widget/CertBtn";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../../../store";
import {BoutiquesStore} from "../../../../store/modules/main/boutiques";
import FastImageCustom from "../../../widget/FastImageCustom";
import {afterAnimation, defaultArr, defaultObj, getAssetUrl} from "../../../../util";
import {Actions} from "react-native-router-flux";
import {ProductDetailActionProps} from "../../../../page/primary/productDetail";
import toast from "../../../common/ToastProxy";
import * as _ from 'lodash'
import {ProductCategoryRelation} from "../../../../net/instance/CommenModelInstance";
import FastImage from "react-native-fast-image";
import {HUNDRED_PERCENT, screenWidth} from "../../../../style";
import hairlineWidth = StyleSheet.hairlineWidth;

interface BoutiquesSectionProps extends Store {

}

interface BoutiquesSectionState {
}

const Title = () => (<View style={[styles.flexDirectionRowNotFlex, styles.centerH, {height: 46}]}>
    <View style={{width: 3, backgroundColor: "#629C36", height: 16}}/>
    <Text style={{fontSize: 16, color: "#000", marginLeft: 8}}>消费增值区</Text>
</View>);
/**
 * 消费增值区
 */
@inject("boutiques")
@observer
export default class BoutiquesSection extends Component<BoutiquesSectionProps, BoutiquesSectionState> {
    boutiques: BoutiquesStore;


    constructor(props) {
        super(props);
        this.state = {boutiques: defaultArr};
        this.boutiques = this.props.boutiques;
    }

    async refresh(categoryId: number) {
        afterAnimation(async ()=>{
            await this.boutiques.getBoutiques(categoryId);
        });


    }

    goProductDetail = (id: number) => {
        return () => {
            const props: ProductDetailActionProps = {id};
            Actions.push("ProductDetail", props);
        }
    };

    render() {
        if (!this.boutiques.boutiquesProducts.length) {
            return null;
        }

        return (
            <View style={{backgroundColor: "#fff", marginTop: 8, paddingLeft: 20}}>
                <Title/>
                <ScrollView contentContainerStyle={{paddingBottom: 15}} horizontal={true}
                            bounces={false}
                            showsHorizontalScrollIndicator={false}
                            style={[{flexGrow: 0, backgroundColor: "#fff"}]}>
                    {this.boutiques.boutiquesProducts.map((products, index) => {
                        const {imageUrl, name, price, disCount, description, id, infoImageUrl} = products;
                        return (
                            <TouchableOpacity onPress={this.goProductDetail(id)} activeOpacity={.85} key={id} style={[border(hairlineWidth,"#d6d6d6"),{
                                marginRight: index === 0 ? 10 : 0,
                                marginBottom: 9,
                                width:screenWidth/2 -16,
                                borderRadius: 5,
                                backgroundColor: "#fff",
                            }, styles.centerH, padding(9, 12)]}>
                                <FastImageCustom source={{uri: getAssetUrl(infoImageUrl)}}
                                                 resizeMode={FastImage.resizeMode.contain}
                                                 style={{width: HUNDRED_PERCENT, height: 150}}/>
                                <Text style={{marginTop: 14, color: "#333333", fontSize: 14}}>{name}</Text>
                                <View
                                    style={[{
                                        marginTop: 7,
                                        width: HUNDRED_PERCENT
                                    }, styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                                    <Text style={{fontSize: 14, color: "#F85824"}}>￥{price}</Text>
                                    <CertBtn onPress={this.goProductDetail(id)}/>
                                </View>
                            </TouchableOpacity>

                        //     <TouchableOpacity onPress={this.goProductDetail(id)} activeOpacity={.85} key={index}
                        //                           style={{width: 284, marginRight: 10}}>
                        //     <View
                        //         style={[border(1, "#F0F0F0"), padding(20, 15), styles.flexDirectionRowNotFlex, styles.centerV]}>
                        //         <FastImageCustom source={{uri: getAssetUrl(infoImageUrl)}}
                        //                          resizeMode={FastImage.resizeMode.contain}
                        //                          style={{width: 100, height: 100, marginRight: 6}}/>
                        //         <Text numberOfLines={3} style={styles.flex}>{description}</Text>
                        //     </View>
                        //     <View
                        //         style={[border(1, "#F0F0F0"), {borderTopWidth: 0}, padding(10, 15), styles.flexDirectionRowNotFlex, styles.centerH, styles.justifyBetween]}>
                        //         <View>
                        //             <Text style={{fontSize: 14, color: "#333333"}}>{name}</Text>
                        //             <View style={[{marginTop: 3}, styles.flexDirectionRowNotFlex, styles.centerH]}>
                        //                 <Text style={{color: "#F85824"}}>￥{price}</Text>
                        //                 <Text style={{
                        //                     color: "#999999",
                        //                     textDecorationLine: "line-through",
                        //                     fontSize: 10,
                        //                     marginLeft: 6
                        //                 }}>￥{disCount?price / (disCount * .1):price}</Text>
                        //             </View>
                        //         </View>
                        //         <CertBtn onPress={this.goProductDetail(id)}/>
                        //     </View>
                        // </TouchableOpacity>
                    )
                    })}
                </ScrollView>
            </View>
        )
    }
}


const BoutiquesSectionStyles = StyleSheet.create({
    container: {}
});
